<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/pace.css" rel="stylesheet">
    <link href="../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="../../static/css/metismenu.min.css" rel="stylesheet">
    <!-- dataTables -->
    <link href="../../static/css/jquery.datatables.min.css" rel="stylesheet" type="text/css">
    <link href="../../static/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css">
    <!--template css-->
    <link href="../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a class="admin-logo" href="index.html">
                    <h1>
                        <img alt="" src="../../static/picture/logo-dark.png">
                    </h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input class="form-control" placeholder="Search for..." type="text">
                        <button class="btn-search" type="button">
                            <i class="fa fa-search"></i>
                        </button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header">
                                    <a class="pull-right text-muted" href="#">
                                        <small>View
                                            All
                                        </small>
                                    </a>
                                    Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-2.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">John Doe
                                                        <label
                                                                class="label label-primary pull-right">Office
                                                        </label>
                                                    </span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-3.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Emily Doe
                                                        <label
                                                                class="label label-info pull-right">Marketing
                                                        </label>
                                                    </span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-4.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Michael Clark
                                                        <label
                                                                class="label label-warning pull-right">Support
                                                        </label>
                                                    </span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-5.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Ronaldo
                                                        <label
                                                                class="label label-success pull-right">Metting
                                                        </label>
                                                    </span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header">
                                    <a class="pull-right text-muted" href="#">
                                        <small>View
                                            All
                                        </small>
                                    </a>
                                    Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <i
                                                                class="icon-cloud-upload text-primary"></i>
                                                    </span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <i
                                                                class="icon-info text-warning"></i>
                                                    </span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <i
                                                                class="icon-check text-success"></i>
                                                    </span>
                                            <span class="notification-title">Project Task Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est
                                                        sagittis luctus.
                                                    </span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="right-sidebar-toggle" href="javascript: void(0);">
                            <i
                                    class="glyphicon glyphicon-align-right"></i>
                        </a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg" width="30">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li>
                                <a href="javascript: void(0);">
                                    <i class="icon-bell"></i>
                                    Activities
                                </a>
                            </li>
                            <li>
                                <a href="javascript: void(0);">
                                    <i class="icon-user"></i>
                                    Profile
                                </a>
                            </li>
                            <li>
                                <a href="javascript: void(0);">
                                    <i class="icon-settings"></i>
                                    Settings
                                </a>
                            </li>
                            <li class="divider"></li>
                            <li>
                                <a href="javascript: void(0);">
                                    <i class="icon-logout"></i>
                                    Logout
                                </a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->

<!--right side bar panel-->
<nav class="right_sidebar" id="right-sidebar-toggle">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li class="active" role="presentation">
                        <a aria-controls="projects" data-toggle="tab"
                           href="#projects"
                           role="tab">Projects
                        </a>
                    </li>
                    <li role="presentation">
                        <a aria-controls="contacts" data-toggle="tab" href="#contacts" role="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="projects" role="tabpanel">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100">Current projects</h3>
                                <small>There are
                                    <strong>7</strong>
                                    Current project
                                </small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning"
                                             style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-success"
                                             style="width: 84%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-info" style="width: 54%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning"
                                             style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="contacts" role="tabpanel">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-1.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-2.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>John doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-danger circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-3.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Eluga Smith</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-4.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Jonathan Doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-5.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a class="btn btn-teal" href="javascript:void(0);"
                                       title="See more contacts">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->


<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading">
                    <span>Main Navigation</span>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-home"></i>
                        Dashboard
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="index.html">Dashboard Alpha</a>
                        </li>
                        <li>
                            <a href="index-beta.html">Dashboard beta</a>
                        </li>

                    </ul>
                </li>
                <li>
                    <a href="widgets.html">
                        <i class="fa fa-diamond"></i>
                        Widgets
                    </a>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-handbag"></i>
                        E-commerce
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="ecommerce-dashboard.jsp">Dashboard</a>
                        </li>
                        <li>
                            <a href="ecommerce-products.jsp">products</a>
                        </li>
                        <li>
                            <a href="ecommerce-orders.jsp">orders</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-envelope-letter"></i>
                        Mail
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="mail-index.html">Inbox</a>
                        </li>
                        <li>
                            <a href="mail-view.html">Inbox view</a>
                        </li>
                        <li>
                            <a href="mail-compose.html">Compose</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-grid"></i>
                        Layouts
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="layout-sidebar-topbar-dark.html">Sidebar +Topbar Dark</a>
                        </li>
                        <li>
                            <a href="layout-sidebar-colored.html">Sidebar Colored</a>
                        </li>
                        <li>
                            <a href="layout-horizontal.html">Horizontal</a>
                        </li>

                        <li>
                            <a href="layout-dashboard-only.html">Dashboard Only</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-heading">
                    <span>Components</span>
                </li>
                <li>
                    <a href="jquery-ui-elements.html">
                        <i class="icon-wrench"></i>
                        Jquery UI Elements
                    </a>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-settings"></i>
                        UI elements
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="false" class="nav-second-level nav">
                        <li>
                            <a href="ui-typography.html">Typography</a>
                        </li>
                        <li>
                            <a href="ui-icons.html">Icons</a>
                        </li>
                        <li>
                            <a href="ui-panels.html">Panels</a>
                        </li>
                        <li>
                            <a href="ui-buttons.html">Buttons</a>
                        </li>
                        <li>
                            <a href="ui-tabs.html">tabs</a>
                        </li>
                        <li>
                            <a href="ui-tip-pop.html">Tooltip & Popovers</a>
                        </li>
                        <li>
                            <a href="ui-alerts.html">Alerts</a>
                        </li>
                        <li>
                            <a href="ui-modals.html">modals</a>
                        </li>
                        <li>
                            <a href="ui-grid.html">grid system</a>
                        </li>
                        <li>
                            <a href="ui-carousel.html">Carousel</a>
                        </li>
                        <li>
                            <a href="ui-sweetalerts.html">Sweet alters</a>
                        </li>
                        <li>
                            <a href="ui-alertify.html">Alertify Alters</a>
                        </li>
                        <li>
                            <a href="ui-sliders.html">Sliders</a>
                        </li>
                        <li>
                            <a href="ui-nestable.html">Nestable</a>
                        </li>
                        <li>
                            <a href="ui-date-time-picker.html">Date time pickers</a>
                        </li>
                        <li>
                            <a href="ui-treeview.html">Tree view</a>
                        </li>
                        <li>
                            <a href="ui-draggable-panels.html">Draggable Panels</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-pencil"></i>
                        Forms
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="form-basic.html">Basic elements</a>
                        </li>
                        <li>
                            <a href="form-file-upload.html">File upload</a>
                        </li>
                        <li>
                            <a href="form-editor.html">text editor</a>
                        </li>
                        <li>
                            <a href="form-wizard.html">Form Wizard</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-bar-chart"></i>
                        Charts
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="chart-flot.html">Flot</a>
                        </li>
                        <li>
                            <a href="chart-morris.html">Morris</a>
                        </li>
                        <li>
                            <a href="chart-radial.html">Radial</a>
                        </li>
                        <li>
                            <a href="chart-c3.html">C3</a>
                        </li>
                        <li>
                            <a href="chart-sparkline.html">Sparkline</a>
                        </li>
                        <li>
                            <a href="chart-rickshaw.html">rickshaw</a>
                        </li>
                        <li>
                            <a href="chart-chartjs.html">ChartJs</a>
                        </li>
                    </ul>
                </li>
                <li class="active">
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-list"></i>
                        Tables
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="table-basic.html">Basic tables</a>
                        </li>
                        <li>
                            <a href="table-data.html">Data tables</a>
                        </li>
                        <li>
                            <a href="table-foo.html">Foo tables</a>
                        </li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-map"></i>
                        Maps
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="map-vector.html">Vector map</a>
                        </li>
                        <li>
                            <a href="map-google.html">Google map</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-heading">
                    <span>More</span>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-folder"></i>
                        Pages
                        <span
                                class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="page-empty.html">Empty page</a>
                        </li>
                        <li>
                            <a href="page-lockscreen.html">Lock-screen</a>
                        </li>
                        <li>
                            <a href="../../page-login.jsp">Login</a>
                        </li>
                        <li>
                            <a href="page-register.html">Register</a>
                        </li>
                        <li>
                            <a href="page-forget-password.html">Forget Password</a>
                        </li>
                        <li>
                            <a href="../../404.jsp">404</a>
                        </li>
                        <li>
                            <a href="page-gallery.html">Gallery</a>
                        </li>
                        <li>
                            <a href="page-timeline.html">Timeline</a>
                        </li>
                        <li>
                            <a href="page-invoice.html">Invoice</a>
                        </li>
                        <li>
                            <a href="page-profile.html">Profile</a>
                        </li>
                        <li>
                            <a href="page-calendar.html">Calendar</a>
                        </li>
                        <li>
                            <a href="page-chat-room.html">Chat room</a>
                        </li>
                        <li>
                            <a href="page-faqs.html">Faqs</a>
                        </li>
                        <li>
                            <a href="page-pricing.html">Pricing</a>
                        </li>
                        <li>
                            <a href="page-contacts.html">Contacts</a>
                        </li>
                        <li>
                            <a href="page-blog.html">Blog</a>
                        </li>
                        <li>
                            <a href="page-blog-article.html">Blog article</a>
                        </li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);">
                        <i class="icon-folder-alt"></i>
                        Nested menu
                        <span class="fa arrow"></span>
                    </a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li>
                            <a href="javascript: void(0);">Level 1</a>
                        </li>
                        <li>
                            <a aria-expanded="true" href="javascript: void(0);">Level 2
                                <span
                                        class="fa arrow"></span>
                            </a>
                            <ul aria-expanded="true" class="nav-third-level nav">
                                <li>
                                    <a href="javascript: void(0);">Level 2</a>
                                </li>
                                <li>
                                    <a href="javascript: void(0);">Level 2</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--<li><a href="landing/home.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
            </ul>
        </div><!--nano content-->
    </div><!--nano scroll end-->
</aside>
<!--left navigation end-->


<!--main content start-->
<section class="main-content">


    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Data Tables</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript: void(0);">
                            <i class="fa fa-home"></i>
                        </a>
                    </li>
                    <li>tables</li>
                    <li>data tables</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default collapsed">
                <div class="panel-heading">
                    Responsive Data tables
                </div>
                <div class="panel-body">
                    <table class="table table-striped dt-responsive nowrap" id="datatable">
                        <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Age</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                        </thead>

                        <tbody>
                        <tr>
                            <td>Tiger Nixon</td>
                            <td>System Architect</td>
                            <td>Edinburgh</td>
                            <td>61</td>
                            <td>2011/04/25</td>
                            <td>$320,800</td>
                        </tr>
                        <tr>
                            <td>Garrett Winters</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>63</td>
                            <td>2011/07/25</td>
                            <td>$170,750</td>
                        </tr>
                        <tr>
                            <td>Ashton Cox</td>
                            <td>Junior Technical Author</td>
                            <td>San Francisco</td>
                            <td>66</td>
                            <td>2009/01/12</td>
                            <td>$86,000</td>
                        </tr>
                        <tr>
                            <td>Cedric Kelly</td>
                            <td>Senior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td>2012/03/29</td>
                            <td>$433,060</td>
                        </tr>
                        <tr>
                            <td>Airi Satou</td>
                            <td>Accountant</td>
                            <td>Tokyo</td>
                            <td>33</td>
                            <td>2008/11/28</td>
                            <td>$162,700</td>
                        </tr>
                        <tr>
                            <td>Brielle Williamson</td>
                            <td>Integration Specialist</td>
                            <td>New York</td>
                            <td>61</td>
                            <td>2012/12/02</td>
                            <td>$372,000</td>
                        </tr>
                        <tr>
                            <td>Herrod Chandler</td>
                            <td>Sales Assistant</td>
                            <td>San Francisco</td>
                            <td>59</td>
                            <td>2012/08/06</td>
                            <td>$137,500</td>
                        </tr>
                        <tr>
                            <td>Rhona Davidson</td>
                            <td>Integration Specialist</td>
                            <td>Tokyo</td>
                            <td>55</td>
                            <td>2010/10/14</td>
                            <td>$327,900</td>
                        </tr>
                        <tr>
                            <td>Colleen Hurst</td>
                            <td>Javascript Developer</td>
                            <td>San Francisco</td>
                            <td>39</td>
                            <td>2009/09/15</td>
                            <td>$205,500</td>
                        </tr>
                        <tr>
                            <td>Sonya Frost</td>
                            <td>Software Engineer</td>
                            <td>Edinburgh</td>
                            <td>23</td>
                            <td>2008/12/13</td>
                            <td>$103,600</td>
                        </tr>
                        <tr>
                            <td>Jena Gaines</td>
                            <td>Office Manager</td>
                            <td>London</td>
                            <td>30</td>
                            <td>2008/12/19</td>
                            <td>$90,560</td>
                        </tr>
                        <tr>
                            <td>Quinn Flynn</td>
                            <td>Support Lead</td>
                            <td>Edinburgh</td>
                            <td>22</td>
                            <td>2013/03/03</td>
                            <td>$342,000</td>
                        </tr>
                        <tr>
                            <td>Charde Marshall</td>
                            <td>Regional Director</td>
                            <td>San Francisco</td>
                            <td>36</td>
                            <td>2008/10/16</td>
                            <td>$470,600</td>
                        </tr>
                        <tr>
                            <td>Haley Kennedy</td>
                            <td>Senior Marketing Designer</td>
                            <td>London</td>
                            <td>43</td>
                            <td>2012/12/18</td>
                            <td>$313,500</td>
                        </tr>
                        <tr>
                            <td>Tatyana Fitzpatrick</td>
                            <td>Regional Director</td>
                            <td>London</td>
                            <td>19</td>
                            <td>2010/03/17</td>
                            <td>$385,750</td>
                        </tr>
                        <tr>
                            <td>Michael Silva</td>
                            <td>Marketing Designer</td>
                            <td>London</td>
                            <td>66</td>
                            <td>2012/11/27</td>
                            <td>$198,500</td>
                        </tr>
                        <tr>
                            <td>Paul Byrd</td>
                            <td>Chief Financial Officer (CFO)</td>
                            <td>New York</td>
                            <td>64</td>
                            <td>2010/06/09</td>
                            <td>$725,000</td>
                        </tr>
                        <tr>
                            <td>Gloria Little</td>
                            <td>Systems Administrator</td>
                            <td>New York</td>
                            <td>59</td>
                            <td>2009/04/10</td>
                            <td>$237,500</td>
                        </tr>
                        <tr>
                            <td>Bradley Greer</td>
                            <td>Software Engineer</td>
                            <td>London</td>
                            <td>41</td>
                            <td>2012/10/13</td>
                            <td>$132,000</td>
                        </tr>
                        <tr>
                            <td>Dai Rios</td>
                            <td>Personnel Lead</td>
                            <td>Edinburgh</td>
                            <td>35</td>
                            <td>2012/09/26</td>
                            <td>$217,500</td>
                        </tr>
                        <tr>
                            <td>Jenette Caldwell</td>
                            <td>Development Lead</td>
                            <td>New York</td>
                            <td>30</td>
                            <td>2011/09/03</td>
                            <td>$345,000</td>
                        </tr>
                        <tr>
                            <td>Yuri Berry</td>
                            <td>Chief Marketing Officer (CMO)</td>
                            <td>New York</td>
                            <td>40</td>
                            <td>2009/06/25</td>
                            <td>$675,000</td>
                        </tr>
                        <tr>
                            <td>Caesar Vance</td>
                            <td>Pre-Sales Support</td>
                            <td>New York</td>
                            <td>21</td>
                            <td>2011/12/12</td>
                            <td>$106,450</td>
                        </tr>
                        <tr>
                            <td>Doris Wilder</td>
                            <td>Sales Assistant</td>
                            <td>Sidney</td>
                            <td>23</td>
                            <td>2010/09/20</td>
                            <td>$85,600</td>
                        </tr>
                        <tr>
                            <td>Angelica Ramos</td>
                            <td>Chief Executive Officer (CEO)</td>
                            <td>London</td>
                            <td>47</td>
                            <td>2009/10/09</td>
                            <td>$1,200,000</td>
                        </tr>
                        <tr>
                            <td>Gavin Joyce</td>
                            <td>Developer</td>
                            <td>Edinburgh</td>
                            <td>42</td>
                            <td>2010/12/22</td>
                            <td>$92,575</td>
                        </tr>
                        <tr>
                            <td>Jennifer Chang</td>
                            <td>Regional Director</td>
                            <td>Singapore</td>
                            <td>28</td>
                            <td>2010/11/14</td>
                            <td>$357,650</td>
                        </tr>
                        <tr>
                            <td>Brenden Wagner</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>28</td>
                            <td>2011/06/07</td>
                            <td>$206,850</td>
                        </tr>
                        <tr>
                            <td>Fiona Green</td>
                            <td>Chief Operating Officer (COO)</td>
                            <td>San Francisco</td>
                            <td>48</td>
                            <td>2010/03/11</td>
                            <td>$850,000</td>
                        </tr>
                        <tr>
                            <td>Shou Itou</td>
                            <td>Regional Marketing</td>
                            <td>Tokyo</td>
                            <td>20</td>
                            <td>2011/08/14</td>
                            <td>$163,000</td>
                        </tr>
                        <tr>
                            <td>Michelle House</td>
                            <td>Integration Specialist</td>
                            <td>Sidney</td>
                            <td>37</td>
                            <td>2011/06/02</td>
                            <td>$95,400</td>
                        </tr>
                        <tr>
                            <td>Suki Burks</td>
                            <td>Developer</td>
                            <td>London</td>
                            <td>53</td>
                            <td>2009/10/22</td>
                            <td>$114,500</td>
                        </tr>
                        <tr>
                            <td>Prescott Bartlett</td>
                            <td>Technical Author</td>
                            <td>London</td>
                            <td>27</td>
                            <td>2011/05/07</td>
                            <td>$145,000</td>
                        </tr>
                        <tr>
                            <td>Gavin Cortez</td>
                            <td>Team Leader</td>
                            <td>San Francisco</td>
                            <td>22</td>
                            <td>2008/10/26</td>
                            <td>$235,500</td>
                        </tr>
                        <tr>
                            <td>Martena Mccray</td>
                            <td>Post-Sales support</td>
                            <td>Edinburgh</td>
                            <td>46</td>
                            <td>2011/03/09</td>
                            <td>$324,050</td>
                        </tr>
                        <tr>
                            <td>Unity Butler</td>
                            <td>Marketing Designer</td>
                            <td>San Francisco</td>
                            <td>47</td>
                            <td>2009/12/09</td>
                            <td>$85,675</td>
                        </tr>
                        <tr>
                            <td>Howard Hatfield</td>
                            <td>Office Manager</td>
                            <td>San Francisco</td>
                            <td>51</td>
                            <td>2008/12/16</td>
                            <td>$164,500</td>
                        </tr>
                        <tr>
                            <td>Hope Fuentes</td>
                            <td>Secretary</td>
                            <td>San Francisco</td>
                            <td>41</td>
                            <td>2010/02/12</td>
                            <td>$109,850</td>
                        </tr>
                        <tr>
                            <td>Vivian Harrell</td>
                            <td>Financial Controller</td>
                            <td>San Francisco</td>
                            <td>62</td>
                            <td>2009/02/14</td>
                            <td>$452,500</td>
                        </tr>
                        <tr>
                            <td>Timothy Mooney</td>
                            <td>Office Manager</td>
                            <td>London</td>
                            <td>37</td>
                            <td>2008/12/11</td>
                            <td>$136,200</td>
                        </tr>
                        <tr>
                            <td>Jackson Bradshaw</td>
                            <td>Director</td>
                            <td>New York</td>
                            <td>65</td>
                            <td>2008/09/26</td>
                            <td>$645,750</td>
                        </tr>
                        <tr>
                            <td>Olivia Liang</td>
                            <td>Support Engineer</td>
                            <td>Singapore</td>
                            <td>64</td>
                            <td>2011/02/03</td>
                            <td>$234,500</td>
                        </tr>
                        <tr>
                            <td>Bruno Nash</td>
                            <td>Software Engineer</td>
                            <td>London</td>
                            <td>38</td>
                            <td>2011/05/03</td>
                            <td>$163,500</td>
                        </tr>
                        <tr>
                            <td>Sakura Yamamoto</td>
                            <td>Support Engineer</td>
                            <td>Tokyo</td>
                            <td>37</td>
                            <td>2009/08/19</td>
                            <td>$139,575</td>
                        </tr>
                        <tr>
                            <td>Thor Walton</td>
                            <td>Developer</td>
                            <td>New York</td>
                            <td>61</td>
                            <td>2013/08/11</td>
                            <td>$98,540</td>
                        </tr>
                        <tr>
                            <td>Finn Camacho</td>
                            <td>Support Engineer</td>
                            <td>San Francisco</td>
                            <td>47</td>
                            <td>2009/07/07</td>
                            <td>$87,500</td>
                        </tr>
                        <tr>
                            <td>Serge Baldwin</td>
                            <td>Data Coordinator</td>
                            <td>Singapore</td>
                            <td>64</td>
                            <td>2012/04/09</td>
                            <td>$138,575</td>
                        </tr>
                        <tr>
                            <td>Zenaida Frank</td>
                            <td>Software Engineer</td>
                            <td>New York</td>
                            <td>63</td>
                            <td>2010/01/04</td>
                            <td>$125,250</td>
                        </tr>
                        <tr>
                            <td>Zorita Serrano</td>
                            <td>Software Engineer</td>
                            <td>San Francisco</td>
                            <td>56</td>
                            <td>2012/06/01</td>
                            <td>$115,000</td>
                        </tr>
                        <tr>
                            <td>Jennifer Acosta</td>
                            <td>Junior Javascript Developer</td>
                            <td>Edinburgh</td>
                            <td>43</td>
                            <td>2013/02/01</td>
                            <td>$75,650</td>
                        </tr>
                        <tr>
                            <td>Cara Stevens</td>
                            <td>Sales Assistant</td>
                            <td>New York</td>
                            <td>46</td>
                            <td>2011/12/06</td>
                            <td>$145,600</td>
                        </tr>
                        <tr>
                            <td>Hermione Butler</td>
                            <td>Regional Director</td>
                            <td>London</td>
                            <td>47</td>
                            <td>2011/03/21</td>
                            <td>$356,250</td>
                        </tr>
                        <tr>
                            <td>Lael Greer</td>
                            <td>Systems Administrator</td>
                            <td>London</td>
                            <td>21</td>
                            <td>2009/02/27</td>
                            <td>$103,500</td>
                        </tr>
                        <tr>
                            <td>Jonas Alexander</td>
                            <td>Developer</td>
                            <td>San Francisco</td>
                            <td>30</td>
                            <td>2010/07/14</td>
                            <td>$86,500</td>
                        </tr>
                        <tr>
                            <td>Shad Decker</td>
                            <td>Regional Director</td>
                            <td>Edinburgh</td>
                            <td>51</td>
                            <td>2008/11/13</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Michael Bruce</td>
                            <td>Javascript Developer</td>
                            <td>Singapore</td>
                            <td>29</td>
                            <td>2011/06/27</td>
                            <td>$183,000</td>
                        </tr>
                        <tr>
                            <td>Donna Snider</td>
                            <td>Customer Support</td>
                            <td>New York</td>
                            <td>27</td>
                            <td>2011/01/25</td>
                            <td>$112,000</td>
                        </tr>
                        </tbody>
                    </table>

                </div>
            </div>
        </div>
    </div><!--end row-->

    <!--end page content-->


    <!--Start footer-->
    <footer class="footer">
        <span>Copyright &copy; 2016. Float</span>
    </footer>
    <!--end footer-->

</section>
<!--end main content-->


<!--Common plugins-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/pace.min.js"></script>
<script src="../../static/js/jasny-bootstrap.min.js"></script>
<script src="../../static/js/jquery.slimscroll.min.js"></script>
<script src="../../static/js/jquery.nanoscroller.min.js"></script>
<script src="../../static/js/metismenu.min.js"></script>
<script src="../../static/js/float-custom.js"></script>

<!-- Datatables-->
<script src="../../static/js/jquery.datatables.min.js"></script>
<script src="../../static/js/datatables.responsive.min.js"></script>
<script>
    $(document).ready(function () {
        $('#datatable').dataTable();
    });
</script>

</body>
</html>